<div id="myAccountModal" class="modal hide fade" tabindex="-1"
	role="dialog" aria-labelledby="myAccountModalLabel"
	aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"
			aria-hidden="true">×</button>
		<ul class="nav nav-tabs">
			<li class="active"><a href="#tabs-1" data-toggle="tab">Shipping
					Information</a></li>
			<li><a href="#tabs-2" data-toggle="tab">Diet Information</a></li>
			<li><a href="#tabs-3" data-toggle="tab">Profile</a></li>
		</ul>
	</div>

	<div class="modal-body">
		<div class="tab-content">

			<div id="tabs-1" class="tab-pane active">
				<form class="form-horizontal" action="/application/saveShippingInfo" method="post">
					<div class="control-group">
						<label class="control-label" for="phone">Phone</label> 
						<div class="controls">
						<input type="text" style="width:95px;" name="phone"
							id="phone" value="${user?.shippingInformation?.phone}" /> <span
							class="error">#{error 'phone' /}</span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="companyName">Company name</label> 
						<div class="controls">
						<input type="text" 
							name="companyName" id="companyName"
							value="${user?.shippingInformation?.companyName}" /> <span
									class="error">#{error 'companyName' /}</span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="street">Street</label> 
						<div class="controls">
							<input type="text" style="width:140px;"
							name="street" id="street"
							value="${user?.shippingInformation?.street}" /> <span
									class="error">#{error 'street' /}</span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="streetNo">Street No.</label> 
						<div class="controls">	
							<input type="text" style="width:30px;"
							name="streetNo" id="streetNo"
							value="${user?.shippingInformation?.streetNo}" /> <span
									class="error">#{error 'streetNo' /}</span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="postalCode">Postal code</label> 
						<div class="controls">	
							<input type="text" style="width:50px;"
							name="postalCode" id="postalCode"
							value="${user?.shippingInformation?.postalCode}" /> <span
									class="error">#{error 'postalCode' /}</span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="city">City</label> 
						<div class="controls">
						<input type="text" name="city" style="width:120px;"
							id="city" value="${user?.shippingInformation?.city}" /> <span
									class="error">#{error 'city' /}</span>
						</div>
					</div>
					<div class="controls">
						<button class="btn btn-primary">Save</button>
					</div>
				</form>
			</div>

			<div id="tabs-2" class="tab-pane">
				<form class="form-horizontal" action="/application/saveCalories" method="post">
					<div>
						<label for="information">Please enter your desired calories.</label>
					</div class="control-group">
						<label class="control-label" for="targetCalories">Target calories</label> 
						<div class="controls">	
							<input type="text" style="width:55px;" name="targetCalories" id="targetCalories"
							value="${user?.dietInformation?.targetCalories}" /> <span
									class="error">#{error 'targetCalories' /}</span>
							<button class="btn btn-primary">Save</button>
						</div>
				</form>
				<div>
					<a href="#" onclick="$('#saveDietInfoForm').css('display', 'inline')">
						Or let us calculate them for you.
					</a>
				</div> </br>
				<div id="saveDietInfoForm" style="display:none">
				<form class="form-horizontal" class="form-inline" action="/application/saveDietInfo" method="post">
					<div class="control-group">
						<label class="control-label" for="age">Age</label> 
						<div class="controls">	
							<input type="text" name="age" style="width:30px;"
							id="age" value="${user?.dietInformation?.age}" /> <span
									class="error">#{error 'age' /}</span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="height">Height</label> 
						<div class="controls">	
							<input type="text" style="width:30px;"
							name="height" id="height"
							value="${user?.dietInformation?.height}" /> <span
									class="error">#{error 'height' /}</span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="weight">Weight</label> 
						<div class="controls">	
							<input type="text" style="width:30px;"
							name="weight" id="weight"
							value="${user?.dietInformation?.weight}" /> <span
									class="error">#{error 'weight' /}</span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="isMale">Sex</label> 
						<div class="controls">
						<label class="radio inline"> <input type="radio" name="isMale"
							value="true" checked> Mr. </label> 
						<label class="radio inline"> <input type="radio"
							name="isMale" value="false">Ms. </label>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="weight">Sport profile</label>
						<div class="controls">
							<select class="select" name="sportProfile">
						  <option value="SEDENTARY">Sedentary</option>
						  <option value="LIGHTLY_ACTIVE">Lightly active</option>
						  <option value="MODERATELY_ACTIVE">Moderately active</option>
						  <option value="VERY_ACTIVE">Very active</option>
						  <option value="EXTRA_ACTIVE">Extra active</option>
						</select>
						</div>
					</div>
					<div class="controls">
					<button class="btn btn-primary">Calculate</button> 
					</div>
				</form>
			</div>
			</div>

			<div id="tabs-3" class="tab-pane">
				<form class="form-horizontal" action="/application/saveUserInfo" method="post">
				<div class="control-group">
					<label class="control-label" for="firstName">First Name</label>
					<div class="controls"> 
					<input type="text" style="width:115px;"
						name="firstName" id="firstName" value="${user?.firstName}" /> <span
									class="error">#{error 'firstName' /}</span>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="lastName">Last Name</label> 
					<div class="controls">
					<input type="text" style="width:115px;"
						name="lastName" id="lastName" value="${user?.lastName}" /> <span
									class="error">#{error 'lastName' /}</span>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="email">Email</label>
					<div class="controls">
					<input type="text" name="email" style="width:175px;"
						id="email" value="${user?.email}" /> <span
									class="error">#{error 'email' /}</span>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="password">Password</label> 
					<div class="controls">
					<button class="btn btn-primary">Change password</button>
					</div>
				</div>
				<div class="controls">
					<button class="btn btn-primary">Save</button>
				</div>
				</form>
			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
	</div>
</div>
